<script setup lang="ts">
import { computed, ref } from "vue";
import Portservice from "@/apis";
import { developCategory, levelDict } from "@/constant";
import { $singleMsg } from "xt-public/plugins/utils/element.ts";
import type Typings from "@/typings";

const emit = defineEmits(["confirm"]);

const visible = ref<boolean>(false);
const pageType = ref<Typings.Develop.pageType>("check");

// 查看模式
const isCheck = computed(() => pageType.value === "check");
// 新增模式
const isCreate = computed(() => pageType.value === "create");

const form = ref();
const formData = ref<Partial<Typings.Develop.develop>>({
  id: "",
  title: "",
  level: "",
  category: "",
  content: "",
});

// 编辑器实例
const editor = ref<Typings.XtPublic.Editor.IDomEditor>();
const formJson = computed<Typings.XtPublic.DynamicForm.formJson[]>(() => {
  return [
    {
      el: "select",
      span: 12,
      prop: "category",
      label: "类别",
      placeholder: "请选择",
      options: developCategory,
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
    {
      el: "select",
      span: 12,
      prop: "level",
      label: "紧急程度",
      placeholder: "请选择",
      options: levelDict,
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
    {
      el: "input",
      span: 24,
      prop: "title",
      label: "标题",
      placeholder: "请输入",
      rules: [{ required: true, message: "不能为空", trigger: "blur" }],
    },
    {
      isHide: () => {
        return !visible.value;
      },
      isHtml: isCheck.value,
      el: "editor",
      span: 24,
      prop: "content",
      label: "内容",
      placeholder: "请输入",
      on: {
        // 编辑器创建完成
        created(editorInstance: Typings.XtPublic.Editor.IDomEditor) {
          editor.value = editorInstance;

          // 弹窗查看模式时，禁止编辑；反之可以编辑
          if (isCheck.value) {
            editor.value?.disable();
          } else {
            editor.value?.enable();
          }
        },
      },
      rules: [
        { required: true, message: "不能为空", trigger: "blur" },
        {
          // 自定义校验表单
          validator(_rule: any, _value: any, callback: any) {
            const editorText = editor.value?.getText().trim();
            if (!editorText) {
              callback(new Error("不能为空"));
            } else {
              callback();
            }
          },
        },
      ],
    },
  ];
});

// 控制器
const controller = {
  open(
    scope: Typings.Develop.scope | null,
    type: Typings.Develop.pageType = "check"
  ) {
    visible.value = true;
    pageType.value = type;
    if (!scope) return;
    formData.value = {
      ...scope.row,
    };
  },

  reset() {
    formData.value = {
      id: "",
      category: "",
      level: "",
      title: "",
      content: "",
    };
    pageType.value = "check";
    form.value.getInstance().resetFields();
    form.value.getInstance().clearValidate();
  },

  close() {
    visible.value = false;
    controller.reset();
  },

  async save() {
    form.value.getInstance().clearValidate();
    await form.value.getInstance().validate();
    const params: Partial<Typings.Develop.develop> = {
      category: formData.value.category,
      level: formData.value.level,
      title: formData.value.title,
      content: formData.value.content,
    };
    if (!isCreate.value) {
      params.id = formData.value.id;
    }
    const apiPath = isCreate.value ? "developAddApi" : "developUpdateApi";
    await Portservice[apiPath](params);
    $singleMsg({
      message: `${isCreate.value ? "添加" : "保存"}成功`,
    });
    controller.close();
    emit("confirm");
  },
};

defineExpose({
  open: controller.open,
});
</script>

<template>
  <xt-drawer
    title="开发待办信息"
    v-model="visible"
    :before-close="controller.close"
  >
    <xt-dynamic-form
      ref="form"
      :label-width="108"
      :disabled="isCheck"
      :data="formData"
      :formJson="formJson"
    />

    <template #footer>
      <div class="w-full center">
        <xt-button @click="controller.save" v-if="!isCheck">确 定</xt-button>
        <xt-button type="default" @click="controller.close">取 消</xt-button>
      </div>
    </template>
  </xt-drawer>
</template>
